<template>
  <div class="top-all">
    <!-- 0. 全部左 -->
    <!-- <div class="toplist" v-for="(l, i) in toplist" :key="i">
      <div class="info">
        <h2 class="title">{{ l.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(x, y) in l.trackList" :key="y">
            <span class="num">{{ y + 1 }}</span>
            <span class="name">{{ x.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ x.artist[0].name }}</span>
          </div>
        </div>
      </div>
      <img :src="l.pic" alt="" />
    </div> -->

    <!-- 1. 左 -->
    <div class="toplist">
      <img :src="top0.pic" alt="" />
      <div class="info">
        <h2 class="title">{{ top0.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top0.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 2. 右 -->
    <div class="toplist">
      <div class="info">
        <h2 class="title">{{ top1.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top1.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
      <img :src="top1.pic" alt="" />
    </div>
    <!-- 3. 左 -->
    <div class="toplist">
      <img :src="top2.pic" alt="" />
      <div class="info">
        <h2 class="title">{{ top2.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top2.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 4. 右 -->
    <div class="toplist">
      <div class="info">
        <h2 class="title">{{ top3.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top3.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
      <img :src="top3.pic" alt="" />
    </div>
    <!-- 5. 左 -->
    <div class="toplist">
      <img :src="top4.pic" alt="" />
      <div class="info">
        <h2 class="title">{{ top4.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top4.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 6. 右 -->
    <div class="toplist">
      <div class="info">
        <h2 class="title">{{ top5.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top5.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
      <img :src="top5.pic" alt="" />
    </div>
    <!-- 7. 左 -->
    <div class="toplist">
      <img :src="top6.pic" alt="" />
      <div class="info">
        <h2 class="title">{{ top6.title }}</h2>
        <div class="tracklist">
          <div class="song" v-for="(l, i) in top6.trackList" :key="i">
            <span class="num">{{ i + 1 }}</span>
            <span class="name">{{ l.albumTitle }}</span>
            <span class="line">-</span>
            <span class="ges">{{ l.artist[0].name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getTopList } from "./service";
export default {
  data() {
    return {
      toplist: [],
      top0: [],
      top1: [],
      top2: [],
      top3: [],
      top4: [],
      top5: [],
      top6: [],
    };
  },
  methods: {
    async initData() {
      const { data } = (await getTopList()) || {};
      this.toplist = data;
      this.top0 = data[0];
      this.top1 = data[1];
      this.top2 = data[2];
      this.top3 = data[3];
      this.top4 = data[4];
      this.top5 = data[5];
      this.top6 = data[6];
      console.log(this.toplist);
      console.log(this.top1, this.top2);
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="less" scoped>
@import "styles/index.less";
.top-all {
  .padding-bottom(60);
}
.toplist {
  display: flex;
  .padding-top(20);
  .margin-bottom(30);
  .info {
    .margin-right(15);
    .margin-left(30);
    flex: 1;
    .title {
      .margin-top(20);
      .margin-bottom(10);
      font-size: 20px;
      float: none;
      color: #fff;
      font-weight: 700;
    }
    .tracklist {
      .w(160);
      .song {
        .line-height(24);
        .margin-bottom(5);
        .num {
          font-size: 12px;
          color: hsla(0, 0%, 100%, 0.6);
          .padding(0,5,0,0);
        }
        .line {
          font-size: 14px;
          color: hsla(0, 0%, 100%, 0.6);
          .padding(0,5,0,5);
        }
        .name {
          color: #fff;
        }
        .ges {
          color: hsla(0, 0%, 100%, 0.6);
        }
      }
    }
  }
  img {
    display: block;
    .w(150);
    .h(150);
  }
}
</style>
